<template>
  <div class="photo-wall-content" id="photo-wall-content">
    <mu-refresh-control :refreshing="refreshing" :trigger="trigger" @refresh="getPhotoWallData(false,true)" />
    <div class="photo-list" id="photo-list">
      <div class="photo-list-item" v-for="item in photoList" v-bind:style="{backgroundImage: 'url(' + item.avatar + ')'}" @click="toUserInfoPage(item.accountId, item.avatar)">
        <div class="photo-list-item-rate">
          <span class="photo-list-item-rate-title">魅力值</span>
          <star-rating :show-rating="false" :increment="0.01" :rating="item.score" :star-size="20" read-only inline></star-rating>
        </div>
      </div>

    </div>
    <mu-infinite-scroll :scroller="scroller" v-show="loading" loadingText="正在加载..." :loading="loading" @load="getPhotoWallData(true,false)"
    />
  </div>

</template>

<script>
  import mHeader from '../components/header'
  import photo from '../assets/meinv.png'
  export default {
    name: 'photowall',
    components: {
      mHeader
    },

    beforeRouteLeave(to, from, next) {
      let scrollTop = document.getElementById('photo-wall-content').scrollTop;
      sessionStorage.setItem('photo-wall-scrollTop', scrollTop);
      next();
    },

    beforeRouteEnter(to, from, next) {
      // beforeRouteEnter 钩子 不能 访问 this，因为钩子在导航确认前被调用,因此即将登场的新组件还没被创建。
      // 不过，你可以通过传一个回调给 next来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数。
      next(vm => {
        vm.scrollP();
      });
    },

    data() {
      return {
        photoList: [],
        pageNo: 1,
        loading: false,
        hasMore: true,
        scroller: null, //上拉加载
        refreshing: false,
        trigger: null //下拉刷新
      }
    },
    methods: {
      scrollP() {
        document.getElementById('photo-wall-content').scrollTop = Number(sessionStorage.getItem('photo-wall-scrollTop')) || 0;
      },

      getPhotoWallData(isLoadMore, isRefresh) {
        if (isLoadMore) {
          console.log('LoadMore');
          if (!this.hasMore) return;
          this.pageNo++;
          this.loading = true;
        }

        if (isRefresh) {
          console.log('refresh');
          this.pageNo = 1;
          this.refreshing = true;
        }

        var _this = this;
        this.$http.get('photos/wall', {
          params: {
            page: _this.pageNo
          }
        }).then(
          function (response) {
            if (response.data.code === '0') {
              if (isLoadMore) {
                //如何是加载更多就合并
                _this.photoList = _this.photoList.concat(response.data.data.photoList);
                _this.loading = false;
              } else {
                //如果是刷新
                _this.photoList = response.data.data.photoList;
                if (isRefresh) {
                  _this.refreshing = false
                };
              }

              if (response.data.data.photoList.length < 10) {
                _this.hasMore = false;
              } else {
                _this.hasMore = true;
              }
            }
          }
        );
      },

      toUserInfoPage(_accountId, _photoURL) {
        this.$router.push({
          name: 'PhotoUserInfo',
          params: {
            accountId: _accountId
          },
          query: {
            photoURL: _photoURL
          }
        });
      }
    },
    mounted() {
      this.scroller = document.getElementById('photo-wall-content');
      this.trigger = document.getElementById('photo-wall-content');
      this.getPhotoWallData(false, false);
    }
  }

</script>

<style lang="less">
  /*@import "../assets/less/common.less";*/

  .photo-wall-content {
    height: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    position: relative;
    /*RefreshControl 的 Container 元素必须是已定位的元素(也就是 position 为 relative、absolute 或 fixed)*/
  }

  .photo-list {
    background-color: white;
    display: flex;
    flex-wrap: wrap;
    align-content: flex-start;
    margin: 0 -0.5%;
    &-item {
      width: 49%;
      margin: 0.5%;
      padding-bottom: 48%;
      position: relative;
      /* 关键部分 */
      /*background-image: url(../assets/test.jpg);*/
      background-repeat: no-repeat;
      background-position: center center;
      /* 指定图片自动缩放大小 */
      -webkit-background-size: cover;
      background-size: cover;
      /* 指定使用padding-box区域显示背景图片 */
      -webkit-background-origin: padding-box;
      background-origin: padding-box;
      &-rate {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        height: 40px;
        display: flex;
        align-items: center;
        padding: 8px;
        &-title {
          color: white;
          margin-right: 8px;
          /*font-size: 14px;*/
        }
      }
    }
  }

</style>
